function $(seletor) {
    return document.querySelector(seletor);
}

function $$(seletor) {
    return document.querySelectorAll(seletor);
}

var maxImgIndex = 15;
var curTargetIndex = null;
var isGameOver = false;

/* getDom */
var panel = $(".panel");
var initImg = $("#initImg");
var resultImg = $("#resultImg");
var right = $(".right");

/* 获得随机数的函数 */
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
}


function init() {
    curTargetIndex = getRandom(0, maxImgIndex);
    for (let i = 0; i < 100; i++) {
        var imgIndex = null;
        if (i % 9 === 0) {
            imgIndex = curTargetIndex;
        } else {
            imgIndex = getRandom(0, maxImgIndex)
        }

        right.innerHTML += `
        <div class="item">
            <span class="number">${i}</span>
            <span class="vaule"><img src="./images/values/${imgIndex}.png"></span>
        </div>    
    `
    }


}
init();
panel.onclick = function (e) {
    if (isGameOver) {
        if (window.confirm("再玩一次吗?")) {
            init();
            initImg.style.opacity = 1;
            resultImg.style.opacity = 0;
            isGameOver = false;

            e.currentTarget.setAttribute('style', "");
            panel.removeEventListener('transitionend', transitionendHandle)
        }

    } else {
        /* currentTarget事件是当前点击的对象 */
        e.currentTarget.style.transition = 'all 2s';
        e.currentTarget.style.transform = 'rotate(1800deg)';
        panel.addEventListener('transitionend', transitionendHandle);
    }
}

function transitionendHandle() {
    initImg.style.opacity = 0;
    resultImg.src = `./images/values/${curTargetIndex}.png`;
    resultImg.style.opacity = 1;
    isGameOver = true
}